<template>
  <el-text tag="h2" size="large" style="margin: 20px 0">Ship Bidding</el-text>
  <cl-crud ref="BiddingCrud">
    <cl-row>
      <!-- 数据表格 -->
      <cl-table ref="BiddingTable" style="max-height: 300px; height: 300px">
        <template #column-picture="{ scope }"
          >
          <el-image
            v-if="scope.row.picture"
            fit="contain"
            lazy
            style="width: 50px"
            preview-teleported
            :src="scope.row.picture"
            :preview-src-list="[scope.row.picture]"
        /> <span v-else>-</span>
      </template>
      </cl-table>
    </cl-row>

    <cl-row>
      <cl-flex1 />
      <cl-pagination layout="prev, pager, next" />
    </cl-row>
  </cl-crud>
</template>

<script lang="ts" setup>

import { useCool } from "/@/cool";
import { setFocus, useCrud, useTable, useUpsert } from "@cool-vue/crud";
const { refs, setRefs, router, service } = useCool();

const BiddingTable = useTable({
  columns: [
    { label: "Ship Type", prop: "shipType", align: "left", width: 180 },
    { label: "Ship Name", prop: "shipName", align: "left", width: 180 },
    { label: "DWT", prop: "dwt", align: "left", width: 150 },
    {
      label: "Bidding Deposit",
      prop: "biddingDeposit",
      align: "left",
      width: 200,
    },
    {
      label: "Starting Price",
      prop: "startingPrice",
      align: "left",
      width: 150,
    },
    { label: "Starting Date", prop: "startingDate", align: "left", width: 150  },
    { label: "Photo", prop: "picture", align: "left"},
  ],
});
const BiddingCrud = useCrud(
  {
    service: service.app.shipping,
    onRefresh(params, { render }) {
      service.app.shipping
        .page({
          noticeType: "Bidding",
          ...params,
        })
        .then((res) => {
          // 渲染数据
          render(res["list"], {
            size: Number(res["pagination"].size),
            page: Number(res["pagination"].page),
            total: Number(res["pagination"].total),
          });
        });
    },
  },
  (app) => {
    app.refresh();
  }
);

</script>

<style></style>
